<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <a href="http://www.bilibili.com/" id="demo" style="color: red">B站</a>
    <button onclick="myFunc()">点我获取属性</button>
    <p id="para"></p>
    <button onclick="changeHref()">点我改变链接</button>
    <button onclick="my()">点我删除链接</button>
    <script>
      //使用getAttribute()获取元素
      function myFunc() {
        var link = document.getElementById("demo");
        var href = link.getAttribute("href");
        var style = link.getAttribute("style");
        document.getElementById("para").innerHTML =
          "href:" + href + "<br>style:" + style;
      }
      //在元素上设置属性
      function changeHref() {
        var x = document.getElementsByTagName("a")[0];
        x.setAttribute("href", "https://luogu.com.cn/");
        document.getElementById("demo").innerHTML = "洛谷";
      }
      //删除
      function my() {
        document.getElementsByTagName("a")[0].removeAttribute("href");
        document.getElementsByTagName("a")[0].removeAttribute("style");
      }
    </script>
  </body>
</html>
